<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div id="app">
        <el-button @click="showDialog('add')" type="primary" style="margin-bottom: 20px;">新增菜单</el-button>
        <el-dialog :title="dialogTitle" :visible.sync="showDialogFlag" width="30%">
            <el-form :model="currentMenu" label-width="80px">
                <el-form-item label="菜单id">
                    <el-input v-model="currentMenu.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="currentMenu.label"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="currentMenu.href"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="currentMenu.imgicon"></el-input>
                </el-form-item>
                <el-form-item label="父级id">
                    <el-input v-model="currentMenu.parentid"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialogFlag = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="菜单id" width="180">
            </el-table-column>
            <el-table-column prop="label" label="标题" width="180">
            </el-table-column>
            <el-table-column prop="href" label="地址">
            </el-table-column>
            <el-table-column prop="imgicon" label="图标">
            </el-table-column>
            <el-table-column prop="parentid" label="父级id">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button @click="showDialog('edit', scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            showDialogFlag: false,
            isEdit: false,
            dialogTitle: '',
            currentMenu: {
                id: '',
                label: '',
                href: '',
                imgicon: '',
                parentid: ''
            }
        },
        methods: {
            init() {
                let that = this;
                axios.get(API + "menuList")
                    .then(function (response) {
                            console.log(response)
                        that.tableData = response.data.data.list;
                    })
            },
            handleClick(row) {
                let that = this;
                this.$confirm('确定删除此菜单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(API + "deleteMenu?id=" + row.id)
                        .then(function (response) {
                            // 从 tableData 中移除已删除的项
                            that.tableData = that.tableData.filter(item => item.id !== row.id);
                            that.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
							that.init();
                        })
                        .catch(function (error) {
                            console.error("删除失败", error);
                            that.$message.error('删除失败!');
                        });
                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            showDialog(action, row = {}) {
                if (action === 'add') {
                    this.isEdit = false;
                    this.dialogTitle = '新增菜单';
                    this.currentMenu = {
                        id: '',
                        label: '',
                        href: '',
                        imgicon: '',
                        parentid: ''
                    };
                } else if (action === 'edit') {
                    this.isEdit = true;
                    this.dialogTitle = '编辑菜单';
                    this.currentMenu = { ...row };
                }
                this.showDialogFlag = true;
            },
            submitForm() {
                let that = this;
                if (this.isEdit) {
                    axios.post(API + "updateMenu", this.currentMenu)
                        .then(function (response) {
                           // console.log(response);
                            // 更新 tableData 中的项
                            that.tableData = that.tableData.map(item => {
                                console.log(item.id, that.currentMenu.id);
                                if (item.id === that.currentMenu.id) {
                                    return that.currentMenu;
                                }
                                return item;
                            });
                            that.showDialogFlag = false;
                            that.$message({
                                type: 'success',
                                message: '更新成功!'
                            });
                        })
                        .catch(function (error) {
                            console.error("更新失败", error);
                            that.$message.error('更新失败!');
                        });
                } else {
                    // 新增菜单时，不传递 id
                    const { id, ...menuWithoutId } = this.currentMenu;<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查询显示所有的菜单表格数据</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body>
		<div id="app">
			<el-button @click="showDialog('add')" type="primary" style="margin-bottom: 20px;">新增菜单</el-button>
			<el-dialog :title="dialogTitle" :visible.sync="showDialogFlag" width="30%">
				<el-form :model="currentMenu" label-width="80px">
					<el-form-item label="菜单id" style="display: none;">
						<el-input v-model="currentMenu.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="菜单名字">
						<el-input v-model="currentMenu.label"></el-input>
					</el-form-item>
					<el-form-item label="链接地址">
						<el-input v-model="currentMenu.href"></el-input>
					</el-form-item>
					<el-form-item label="小图标">
						<template>
							<i :class="currentMenu.imgicon"></i>
							<el-select v-model="currentMenu.imgicon" placeholder="请选择">
								<el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
									<i :class="item"></i>
									<span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
								</el-option>
							</el-select>
						</template>
					</el-form-item>
					<el-form-item label="所属父级">
						<el-cascader v-model="currentMenu.parentid" :show-checkbox="true" :props="parentidPtions" :options="parentidOptions"
							:show-all-levels="false"></el-cascader>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="showDialogFlag = false">取 消</el-button>
					<el-button type="primary" @click="submitForm">确 定</el-button>
				</span>
			</el-dialog>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="label" label="菜单名字">
				</el-table-column>
				<el-table-column prop="href" label="链接地址">
				</el-table-column>
				<el-table-column prop="imgicon" label="小图标">
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="primary" size="small">删除</el-button>
						<el-button @click="showDialog('edit', scope.row)" type="primary" size="small">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				tableData: [],
				showDialogFlag: false,
				isEdit: false,
				dialogTitle: '',
				currentMenu: {
					id: '',
					label: '',
					href: '',
					imgicon: '',
					parentid: 0,
				},
				parentidPtions: { //配置父级菜单cascader
					value: "id",
					emitPath: false
				},
				parentidOptions: [], //父级菜单集合数据
				imgiconoptions: ["el-icon-loading", "el-icon-platform-eleme", "el-icon-s-custom", "el-icon-share",
					"el-icon-bottom-left", "el-icon-top-left", "el-icon-s-shop", "el-icon-s-promotion",
					"el-icon-eleme", "el-icon-delete-solid", "el-icon-user-solid", "el-icon-star-on",
					"el-icon-question", "el-icon-zoom-in", "el-icon-s-help", "el-icon-picture",
					"el-icon-camera-solid", "el-icon-s-cooperation"
				],
			},
			methods: {
				init() {
					let that = this;
					axios.get(API + "menuList")
						.then(function(response) {
							console.log(response)
							that.tableData = response.data.data.list;
						})
				},
				handleClick(row) {
					let that = this;
					this.$confirm('确定删除此菜单?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.get(API + "deleteMenu?id=" + row.id)
							.then(function(response) {
								// 从 tableData 中移除已删除的项
								that.tableData = that.tableData.filter(item => item.id !== row.id);
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
								that.init();
							})
							.catch(function(error) {
								console.error("删除失败", error);
								that.$message.error('删除失败!');
							});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				showDialog(action, row = {}) {
					var that = this;
					//获取所有菜单集合
					axios.get(API + "menuList")
						.then(function(response) {
							console.log(response)
							var s = arrayToTree(response.data.data.list);
							console.log(s);
							that.parentidOptions = s;
						});
					if (action === 'add') {
						this.isEdit = false;
						this.dialogTitle = '新增菜单';
						this.currentMenu = {
							id: '',
							label: '',
							href: '',
							imgicon: '',
							parentid: 0
						};
					} else if (action === 'edit') {
						this.isEdit = true;
						this.dialogTitle = '编辑菜单';
						this.currentMenu = {
							...row
						};
					}
					this.showDialogFlag = true;
				},
				submitForm() {
					let that = this;
					if (this.isEdit) {
						axios.post(API + "updateMenu", this.currentMenu)
							.then(function(response) {
								// console.log(response);
								// 更新 tableData 中的项
								that.tableData = that.tableData.map(item => {
									console.log(item.id, that.currentMenu.id);
									if (item.id === that.currentMenu.id) {
										return that.currentMenu;
									}
									return item;
								});
								that.showDialogFlag = false;
								that.$message({
									type: 'success',
									message: '更新成功!'
								});
							})
							.catch(function(error) {
								console.error("更新失败", error);
								that.$message.error('更新失败!');
							});
					} else {
						// 新增菜单时，不传递 id
						console.log(this.currentMenu);
						const {	id,...menu} = this.currentMenu;
						axios.post(API + "addMenu/"+menu.label+"/"+menu.href+"/"+menu.imgicon+"/"+menu.parentid)
							.then(function(response) {
								// console.log(response);
								// 从后端获取新的 id 并更新 tableData
								const newMenu = {
									...menu,
									id: response.data.id
								};
								that.tableData.push(newMenu);
								that.showDialogFlag = false;
								that.$message({
									type: 'success',
									message: '新增成功!'
								});
							})
							.catch(function(error) {
								console.error("新增失败", error);
								that.$message.error('新增失败!');
							});
					}
				}
			},
			mounted() {
				this.init();
			}
		})
	</script>
</html>
                    axios.post(API + "addMenu", menuWithoutId)
                        .then(function (response) {
                           // console.log(response);
                            // 从后端获取新的 id 并更新 tableData
                            const newMenu = { ...menuWithoutId, id: response.data.id };
                            that.tableData.push(newMenu);
                            that.showDialogFlag = false;
                            that.$message({
                                type: 'success',
                                message: '新增成功!'
                            });
                        })
                        .catch(function (error) {
                            console.error("新增失败", error);
                            that.$message.error('新增失败!');
                        });
                }
            }
        },
        mounted() {
            this.init();
        }
    })
</script>

</html>